<template>
    <view>
        <view class="dis_f_sb_c">
            <u-notice-bar :text="notice"></u-notice-bar>
            <view>
                <u-button size="small" type="warning" icon="server-man" @click="showKfWx=true">咨询客服</u-button>
            </view>
        </view>
        <view class="p_20">
            <!--            <view class="dis_f_l_c">-->
            <!--            -->
            <!--            </view>-->
            <view class="content_box">
                <view class="m_t_10">
                    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
                    <u--form
                        labelPosition="left"
                        :model="query"
                        :rules="rules"
                        ref="uForm"
                        labelWidth="100"
                    >
                        <u-form-item
                            label="姓名"
                            prop="name"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.name"
                                border="none"
                                placeholder="请输入姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="小名"
                            prop="petName"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.petName"
                                border="none"
                                placeholder="请输入小名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="性别"
                            prop="sexName"
                            borderBottom
                            @click="showSex = true"
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.sexName"
                                disabled
                                disabledColor="#ffffff"
                                placeholder="请选择性别"
                                border="none"
                            ></u--input>
                            <u-icon
                                slot="right"
                                name="arrow-right"
                            ></u-icon>
                        </u-form-item>
                        <u-form-item
                            label="出生日期"
                            prop="birthDate"
                            borderBottom
                            @click="showTime = true"
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.birthDate"
                                disabled
                                disabledColor="#ffffff"
                                placeholder="请选择出生日期"
                                border="none"
                            ></u--input>
                            <u-icon
                                slot="right"
                                name="arrow-right"
                            ></u-icon>
                        </u-form-item>
                        <u-form-item
                            label="年龄"
                            prop="age"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.age"
                                border="none"
                                placeholder="请输入年龄"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="地区"
                            prop="area"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.area"
                                border="none"
                                placeholder="请输入地区"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="街道"
                            prop="street"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.street"
                                border="none"
                                placeholder="请输入街道"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="社区"
                            prop="community"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.community"
                                border="none"
                                placeholder="请输入社区"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="民族"
                            prop="nationality"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.nationality"
                                border="none"
                                placeholder="请输入民族"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="身份证号"
                            prop="idCard"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.idCard"
                                border="none"
                                placeholder="请输入身份证号"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="身高"
                            prop="height"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.height"
                                border="none"
                                placeholder="请输入身高"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="体重"
                            prop="weight"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.weight"
                                border="none"
                                placeholder="请输入体重"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="有无疾病"
                            prop="isIll"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.isIll">
                                <u-radio name="0" label="有"></u-radio>
                                <view class="m_l_10">
                                    <u-radio name="1" label="无"></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            v-if="query.isIll=='0'"
                            label="疾病"
                            prop="ill"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.ill"
                                border="none"
                                placeholder="请输入疾病"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="监护人姓名"
                            prop="guardianName"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.guardianName"
                                border="none"
                                placeholder="请输入监护人姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="guardianTel"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.guardianTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="与孩子关系"
                            prop="relation"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--input
                                v-model="query.relation"
                                border="none"
                                placeholder="请输入与孩子关系"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="邻居姓名"
                            prop="neighborName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.neighborName"
                                border="none"
                                placeholder="请输入邻居姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="neighborTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.neighborTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="村(居)委书记姓名"
                            prop="villageName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.villageName"
                                border="none"
                                placeholder="请输入村(居)委书记姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="villageTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.villageTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="家庭主要联系人姓名"
                            prop="primaryName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.primaryName"
                                border="none"
                                placeholder="请输入家庭主要联系人姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="primaryTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.primaryTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="学校"
                            prop="school"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.school"
                                border="none"
                                placeholder="请输入学校"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="班主任姓名"
                            prop="teacherName"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.teacherName"
                                border="none"
                                placeholder="请输入班主任姓名"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="联系方式"
                            prop="teacherTel"
                            borderBottom
                            ref="item1"
                        >
                            <u--input
                                v-model="query.teacherTel"
                                border="none"
                                placeholder="请输入联系方式"
                            ></u--input>
                        </u-form-item>
                        <u-form-item
                            label="家庭情况"
                            prop="familyInfo"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--textarea
                                v-model="query.familyInfo"
                                border="none"
                                placeholder="请输入家庭情况"
                                autoHeight
                            ></u--textarea>
                        </u-form-item>
                        <u-form-item
                            label="家庭是否有低保"
                            prop="isSubsistenceAllowance"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.isSubsistenceAllowance">
                                <u-radio name="0" label="有"></u-radio>
                                <view class="m_l_10">
                                    <u-radio name="1" label="无"></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            label="家庭是否是精准扶贫户"
                            prop="isPreciseHelp"
                            borderBottom
                            ref="item1"
                        >
                            <u-radio-group v-model="query.isPreciseHelp">
                                <u-radio name="0" label="是"></u-radio>
                                <view class="m_l_10">
                                    <u-radio name="1" label="否"></u-radio>
                                </view>
                            </u-radio-group>
                        </u-form-item>
                        <u-form-item
                            label="微心愿"
                            prop="wish"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <u--textarea
                                v-model="query.wish"
                                border="none"
                                placeholder="请输入微心愿"
                                autoHeight
                            ></u--textarea >
                        </u-form-item>
                        <u-form-item
                            label="孩子现状"
                            prop="helpType"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <uni-data-picker v-model="query.helpType"  :localdata="helpTypeList" placeholder="请选择孩子现状" popup-title="请选择孩子现状" @change="onTypeChange" ></uni-data-picker>
                        </u-form-item>
                        <u-form-item
                            label="帮扶需求"
                            prop="helpNeeds"
                            borderBottom
                            ref="item1"
                            required
                        >
                            <uni-data-picker v-model="query.helpNeeds"  :localdata="helpNeedsList" placeholder="请选择帮扶需求" popup-title="请选择帮扶需求" @change="onTypeHelpNeedsChange" ></uni-data-picker>
                        </u-form-item>
                    </u--form>
                    <view class="dis_f_c_c m_t_20 m_b_20" @click="handleSend">
                        <view class="release dis_f_c_c" >发布</view>
                    </view>
                </view>
            </view>
        </view>
        <u-action-sheet
            :show="showSex"
            :actions="actions"
            title="请选择性别"
            @close="showSex = false"
            @select="sexSelect"
        >
        </u-action-sheet>
        <u-datetime-picker
            :show="showTime"
            v-model="value1"
            mode="date"
            :formatter="formatter"
            @confirm="handleTimeConfirm"
        ></u-datetime-picker>

        <!--    客服    -->
        <u-popup :show="showKfWx" @close="showKfWx=false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view style="padding: 30rpx;">
                <u-image width="300rpx" height="300rpx" :src="kfWx"></u-image>
                <view class="dis_f_c_c f_s_16 m_t_10 c_9">长按识别二维码</view>
            </view>
        </u-popup>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>
<script>

import {getByKeyApi, addOrphanApi} from "@/sheep/api";
import { mapGetters, mapMutations } from "vuex";
export default {
    name: "index",
    data() {
        return {
            notice:'',
            showKfWx:false,
            kfWx:'',
            showSex: false,
            actions: [{
                name: '男',
                value:0
            },
                {
                    name: '女',
                    value:1
                }],
            showTime:false,
            value1: Number(new Date()),
            columnsPicker:[],
            query: {
                name:'',
                petName:'',
                sex:'',
                sexName:'',
                birthDate:'',
                age:'',
                area:'',
                street:'',
                community:'',
                nationality:'',
                idCard:'',
                height:'',
                weight:'',
                isIll:'',
                ill:'',
                guardianName:'',
                guardianTel:'',
                relation:'',
                neighborName:'',
                neighborTel:'',
                villageName:'',
                villageTel:'',
                primaryName:'',
                primaryTel:'',
                school:'',
                teacherName:'',
                teacherTel:'',
                familyInfo:'',
                isSubsistenceAllowance:'',
                isPreciseHelp:'',
                wish:'',
                helpType:'',
                helpNeeds:'',
            },
            rules: {
                'name': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'petName': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'sexName': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
                'birthDate': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
                'age': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'area': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'street': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'community': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'familyInfo': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'wish': {
                    type: 'string',
                    required: true,
                    message: '请输入',
                    trigger: ['blur', 'change']
                },
                'helpNeeds': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
                'helpType': {
                    type: 'string',
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change']
                },
            },
            helpTypeList:[],
            helpNeedsList:[],
            showTips:false,
        }
    },
    onShow() {
        this.geHelpType()
        this.getNoticeList()
        this.getHelpNeeds()
        this.getwx()
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        async getNoticeList() {
            let res = await getByKeyApi("applyOrphanTips");
            res.data.forEach((element) => {
                this.notice += element.configValue + "                     ";
            });
        },
        async getwx() {
            let res = await getByKeyApi("kf_wx");
            this.kfWx = res.data[0].url;
        },
        async geHelpType() {
            let res = await getByKeyApi("helpType");
            this.helpTypeList = res.data.map(item=>{
                return {
                    text: item.configName,
                    value: item.configName
                }
            })
        },
        async getHelpNeeds() {
            let res = await getByKeyApi("helpNeeds");
            this.helpNeedsList = res.data.map(item=>{
                return {
                    text: item.configName,
                    value: item.configName
                }
            })
        },
        onTypeChange(e){
            const value = e.detail.value
            console.log("value", value);
            if (value.length>0){
                this.query.helpType = value[0].text
            }else{
                this.query.helpType = ''
            }

        },
        onTypeHelpNeedsChange(e){
            const value = e.detail.value
            console.log("value", value);
            if (value.length>0){
                this.query.helpNeeds = value[0].text
            }else{
                this.query.helpNeeds = ''
            }

        },
        sexSelect(e) {
            this.query.sexName = e.name
            this.query.sex = e.value
        },
        handleTimeConfirm(e){
            this.query.birthDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
            this.$refs.uForm.validateField('query.birthDate')
            this.showTime = false
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            return value
        },

        handleSend() {
            console.log("this.query", this.query);
            this.$refs.uForm.validate().then(res=>{
                uni.showLoading({});
                this.query.userId = this.userInfo.userId
                addOrphanApi(this.query).then(res => {
                    uni.hideLoading()
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                    if (res.code == 200){
                        //关闭当前页面 跳到我的发布页面
                        setTimeout(() => {
                            // uni.redirectTo({
                            //     url: '/pages/mine/mySend',
                            // })
                            uni.switchTab({
                                url: '/pages/mine/index',
                            })
                        }, 1000);
                    }
                })

            })
        },
    }
}
</script>

<style scoped lang="scss">
.release {
    width: 600rpx;
    height: 70rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    background-color: #FCE4E0;
    color: #000;
}

// 支付弹层
.pay {
    padding: 30rpx;

    .pay-title {
        font-size: 35rpx;
    }

    .pay-select {
        margin: 50rpx;
    }

    .pay-flex {
        display: flex;
        margin-top: 30rpx;

        /deep/ .u-button {
            height: 84rpx !important;
            font-size: 30rpx;

            &:first-child {
                margin-right: 25rpx !important;
            }
        }
    }

    .surplus {
        margin-top: 35rpx;
        font-size: 25rpx;

        .surplus-num {
            margin-left: 15rpx;
        }
    }
}
</style>
